<template>
  <div>
    <el-tabs v-model="activeName" type="border-card">
      <el-tab-pane name="1">
        <span slot="label"><i class="el-icon-s-ticket"></i> 乐园门票</span>
        <div class="title">
          <h2>多罗碧加乐园门票</h2>
          <p>
            购买多罗碧加乐园门票，探索这个神奇的世界。无论老幼，都可以在此感受充满创造力、冒险和刺激的乐趣！
          </p>
        </div>

        <el-divider></el-divider>

        <div style="display: flex">
          <el-radio v-model="radio1" label="1" border>
            <div>
              <strong>乐园一日票 + 乐园美食套券</strong>
              <p>购买乐园门票+乐园美食套券（含5张美食优惠券）</p>
            </div>
          </el-radio>
          <el-radio v-model="radio1" label="2" border>
            <div>
              <strong>乐园夜场乐游乐食</strong>
              <p>
                乐园夜场票（18:00起入园）+
                夜间套餐25元优惠券，套餐饮料免费升杯券
              </p>
            </div>
          </el-radio>
          <el-radio v-model="radio1" label="3" border>
            <div>
              <strong>一日票</strong>
              <p>开启奇妙之旅</p>
            </div>
          </el-radio>
          <el-radio v-model="radio1" label="4" border>
            <div>
              <strong>夜场票</strong>
              <p>开启奇妙之旅</p>
            </div>
          </el-radio>
        </div>

        <el-divider></el-divider>

        <div style="display: flex">
          <div style="flex: 1">
            <div class="choose-ticket">
              <h3>1</h3>
              <div>
                <strong>选择门票数量</strong>
                <div class="select-box">
                  <div>
                    <el-select v-model="value1" placeholder="请选择">
                      <el-option
                        v-for="item in options1"
                        :key="item"
                        :label="item"
                        :value="item"
                      >
                      </el-option>
                    </el-select>
                    <p>标准票<i class="el-icon-info"></i></p>
                  </div>
                  <div>
                    <el-select v-model="value2" placeholder="请选择">
                      <el-option
                        v-for="item in options2"
                        :key="item"
                        :label="item"
                        :value="item"
                      >
                      </el-option>
                    </el-select>
                    <p>儿童票 / 老年票<i class="el-icon-info"></i></p>
                  </div>
                </div>
              </div>
            </div>

            <el-divider></el-divider>

            <div class="choose-ticket">
              <h3>2</h3>
              <div>
                <strong>选择游玩日期</strong>
                <div class="date-select-box">
                  <el-date-picker
                    v-model="value3"
                    align="right"
                    type="date"
                    placeholder="选择日期"
                    :picker-options="pickerOptions"
                  >
                  </el-date-picker>
                </div>
              </div>
            </div>

            <el-divider></el-divider>

            <div class="choose-ticket third">
              <h3>3</h3>
              <div>
                <strong>查看您的门票</strong>
                <div v-if="value3">
                  <h4>
                    不满十六周岁的游客必须由十六周岁(含)及以上游客陪同入园。
                  </h4>
                  <div>
                    <div class="row">
                      <strong>{{ tickets[radio1 - 1].name }}</strong>
                      <p>
                        标准票<span>{{ tickets[radio1 - 1].standard }} 元</span>
                      </p>
                    </div>
                    <div class="row">
                      <p>{{ value3 | dateFilter }}</p>
                      <p>
                        儿童票 / 老年票
                        <span>{{ tickets[radio1 - 1].other }} 元</span>
                      </p>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <div class="all-tickets" v-if="value3">
            <strong style="font-size: 18px; color: #253b56">当前选择</strong>
            <div>
              <div class="ticket-info">
                <strong>{{ tickets[radio1 - 1].name }}</strong>
                <p>{{ value3 | dateFilter }}</p>
                <p v-if="parseInt(value1)">
                  {{ value1 }} x 标准票
                  <span>({{ tickets[radio1 - 1].standard }} 元/门票)</span>
                </p>
                <p v-if="parseInt(value2)">
                  {{ value2 }} x 儿童票 / 老年票
                  <span>({{ tickets[radio1 - 1].other }} 元/门票)</span>
                </p>
              </div>
              <div class="total-price">
                <strong>总计</strong>
                <strong>
                  {{
                    value1 * tickets[radio1 - 1].standard +
                    value2 * tickets[radio1 - 1].other
                  }}
                  <span style="color: #85979c; font-size: 12px">元</span>
                </strong>
              </div>
              <el-button
                type="primary"
                plain
                size="small"
                @click="handlePayment"
                style="float: right"
                >付款</el-button
              >
            </div>
          </div>
        </div>
      </el-tab-pane>

      <el-tab-pane name="2">
        <span slot="label"><i class="el-icon-bank-card"></i> 乐园年卡</span>
        <div class="title" style="margin-bottom: 20px">
          <h2>多罗碧加乐园年卡</h2>
          <p>即刻购卡，让奇妙延续！</p>
        </div>

        <el-collapse accordion>
          <el-collapse-item name="1">
            <template slot="title">
              <div class="card">
                <div class="img-name">
                  <h3>梦幻水晶卡</h3>
                  <img
                    :src="require('@/assets/crystal-pass.jpg')"
                    alt=""
                    width="170"
                    height="96"
                  />
                </div>
                <div class="card-price">
                  <i>价格：</i>
                  <div>
                    <div>
                      <p>标准</p>
                      <h5>{{ cards[0].standard }}<sub>元</sub></h5>
                    </div>
                    <div>
                      <p>儿童 / 老年人</p>
                      <h5>{{ cards[0].other }}<sub>元</sub></h5>
                    </div>
                  </div>
                </div>
              </div>
              <el-button
                type="primary"
                plain
                @click.stop="handleAnnualCard(1)"
                style="margin-left: 120px"
                >付款</el-button
              >
            </template>
            <div class="item-content">
              <ul style="padding: 0 30px">
                <li>
                  受限于限定日期及有限名额，年卡有效期内不少于256天的可预约入园日(“可预约入园日”)，每次入园前须提前在“可预约入园日”内进行预约，预约成功后方可入园，可预约的名额有限，额满为止。
                </li>
                <li>约8折品尝乐园及度假区酒店缤纷美食</li>
                <li>约8折享乐园及度假区指定商店购物乐趣</li>
                <li>生日月在指定餐厅用餐可享生日蛋糕福利</li>
                <li>生日当月年卡持卡人本人在指定快餐厅用餐时可享一份甜品</li>
                <li>生日酒店礼遇</li>
                <li>度假区酒店不定期折扣及福利</li>
                <li>多罗碧加小镇多重好礼及福利</li>
              </ul>
            </div>
          </el-collapse-item>
          <el-collapse-item name="2">
            <template slot="title">
              <div class="card">
                <div class="img-name">
                  <h3>奇妙金卡</h3>
                  <img
                    :src="require('@/assets/gold-annual-pass.jpg')"
                    alt=""
                    width="170"
                    height="96"
                  />
                </div>
                <div class="card-price">
                  <i>价格：</i>
                  <div>
                    <div>
                      <p>标准</p>
                      <h5>{{ cards[1].standard }}<sub>元</sub></h5>
                    </div>
                    <div>
                      <p>儿童 / 老年人</p>
                      <h5>{{ cards[1].other }}<sub>元</sub></h5>
                    </div>
                  </div>
                </div>
              </div>
              <el-button
                type="primary"
                plain
                @click.stop="handleAnnualCard(2)"
                style="margin-left: 120px"
                >付款</el-button
              >
            </template>
            <div class="item-content">
              <ul style="padding: 0 30px">
                <li>受限于限定日期，年卡有效期内不少于256天的可入园日。</li>
                <li>约8折品尝乐园及度假区酒店缤纷美食</li>
                <li>约8折享乐园及度假区指定商店购物乐趣</li>
                <li>生日月在指定餐厅用餐可享生日蛋糕福利</li>
                <li>【无限钻石卡和奇妙金卡】卢米亚厨房自助晚餐买二送一</li>
                <li>
                  【无限钻石卡和奇妙金卡】在绚景楼享用晚餐赠指定葡萄酒一瓶
                </li>
                <li>生日当月年卡持卡人本人在指定快餐厅用餐时可享一份甜品</li>
                <li>生日酒店礼遇</li>
                <li>度假区酒店不定期折扣及福利</li>
                <li>多罗碧加小镇多重好礼及福利</li>
              </ul>
            </div>
          </el-collapse-item>
          <el-collapse-item name="3">
            <template slot="title">
              <div class="card">
                <div class="img-name">
                  <h3>无限钻石卡</h3>
                  <img
                    :src="require('@/assets/diamond-annual-pass.jpg')"
                    alt=""
                    width="170"
                    height="96"
                  />
                </div>
                <div class="card-price">
                  <i>价格：</i>
                  <div>
                    <div>
                      <p>标准</p>
                      <h5>{{ cards[2].standard }}<sub>元</sub></h5>
                    </div>
                    <div>
                      <p>儿童 / 老年人</p>
                      <h5>{{ cards[2].other }}<sub>元</sub></h5>
                    </div>
                  </div>
                </div>
              </div>
              <el-button
                type="primary"
                plain
                @click.stop="handleAnnualCard(3)"
                style="margin-left: 120px"
                >付款</el-button
              >
            </template>
            <div class="item-content">
              <ul style="padding: 0 30px">
                <li>365天无限次入园，可能不包括部分特别活动时间段。</li>
                <li>约8折品尝乐园及度假区酒店缤纷美食</li>
                <li>约8折享乐园及度假区指定商店购物乐趣</li>
                <li>【无限钻石卡】约8折乐享指定停车场优惠</li>
                <li>生日月在指定餐厅用餐可享生日蛋糕福利</li>
                <li>【无限钻石卡和奇妙金卡】卢米亚厨房自助晚餐买二送一</li>
                <li>
                  【无限钻石卡和奇妙金卡】在绚景楼享用晚餐赠指定葡萄酒一瓶
                </li>
                <li>生日当月年卡持卡人本人在指定快餐厅用餐时可享一份甜品</li>
                <li>生日酒店礼遇</li>
                <li>【无限钻石卡】全年12次提前入园机会</li>
                <li>【无限钻石卡】全年4次免费童车租赁</li>
                <li>【无限钻石卡】优先报名参与年卡尊享活动</li>
                <li>度假区酒店不定期折扣及福利</li>
                <li>多罗碧加小镇多重好礼及福利</li>
              </ul>
            </div>
          </el-collapse-item>
        </el-collapse>
      </el-tab-pane>
    </el-tabs>
    <!-- 门票付款弹框 -->
    <el-dialog title="订单详情" :visible.sync="ticketDialogVisible">
      <div class="payment-box">
        <div style="flex: 1">
          <div class="title">
            <h2>多罗碧加乐园门票</h2>
          </div>
          <div class="ticket-info" style="margin-top: 15px">
            <strong>{{ tickets[radio1 - 1].name }}</strong>
            <p style="margin-top: 5px">{{ value3 | dateFilter }}</p>
            <p v-if="parseInt(value1)" style="margin-top: 20px">
              标准票，数量：{{ value1 }}
              <span
                >&nbsp;(单价：{{ tickets[radio1 - 1].standard }} 元/门票)</span
              >
            </p>
            <p v-if="parseInt(value2)" style="margin-top: 5px">
              儿童票 / 老年票，数量：{{ value2 }}
              <span>&nbsp;(单价：{{ tickets[radio1 - 1].other }} 元/门票)</span>
            </p>
          </div>
        </div>
        <div class="all-tickets" v-if="value3">
          <strong style="font-size: 18px; color: #253b56">价格明细</strong>
          <div>
            <div class="total-price middle">
              <strong>合计金额</strong>
              <strong>
                ￥{{
                  value1 * tickets[radio1 - 1].standard +
                  value2 * tickets[radio1 - 1].other
                }}
                <span style="color: #85979c; font-size: 12px">元</span>
              </strong>
            </div>
            <div class="total-price" style="position: relative; top: -10px">
              <strong>当日应支付金额</strong>
              <strong>
                ￥{{
                  value1 * tickets[radio1 - 1].standard +
                  value2 * tickets[radio1 - 1].other
                }}
                <span style="color: #85979c; font-size: 12px">元</span>
              </strong>
            </div>
          </div>
        </div>
      </div>
      <el-divider></el-divider>
      <div class="payment-image" style="margin-top: 10px">
        <div class="title">
          <h2>扫码支付</h2>
        </div>
        <div style="margin-top: 30px; text-align: center">
          <img
            :src="require('@/assets/Alipay.jpg')"
            alt=""
            width="350"
            height="393"
          />
          <img
            :src="require('@/assets/WeChat.jpg')"
            alt=""
            width="350"
            height="393"
          />
        </div>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="ticketDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="ticketPayment">确 定</el-button>
      </div>
    </el-dialog>

    <!-- 年卡付款弹框 -->
    <el-dialog
      title="订单详情"
      :visible.sync="cardDialogVisible"
      :show-close="false"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
    >
      <div v-if="cardSelectToggle">
        <div class="title">
          <h2 style="text-align: left">请选择您要购买的年卡类型</h2>
        </div>
        <div class="card-box">
          <el-radio v-model="cardRadio" label="1" border>
            <div>
              <div class="card">
                <div class="img-name">
                  <h3 v-if="index == 1">{{ cards[0].name }}</h3>
                  <h3 v-if="index == 2">{{ cards[1].name }}</h3>
                  <h3 v-if="index == 3">{{ cards[2].name }}</h3>
                  <img
                    v-if="index == 1"
                    :src="require('@/assets/crystal-pass.jpg')"
                    alt=""
                    width="170"
                    height="96"
                  />
                  <img
                    v-if="index == 2"
                    :src="require('@/assets/gold-annual-pass.jpg')"
                    alt=""
                    width="170"
                    height="96"
                  />
                  <img
                    v-if="index == 3"
                    :src="require('@/assets/diamond-annual-pass.jpg')"
                    alt=""
                    width="170"
                    height="96"
                  />
                </div>
                <div class="card-price">
                  <i>价格：</i>
                  <div>
                    <div>
                      <p>标准</p>
                      <h5 v-if="index == 1">
                        {{ cards[0].standard }}<sub>元</sub>
                      </h5>
                      <h5 v-if="index == 2">
                        {{ cards[1].standard }}<sub>元</sub>
                      </h5>
                      <h5 v-if="index == 3">
                        {{ cards[2].standard }}<sub>元</sub>
                      </h5>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </el-radio>
          <el-radio v-model="cardRadio" label="2" border>
            <div>
              <div class="card">
                <div class="img-name">
                  <h3 v-if="index == 1">{{ cards[0].name }}</h3>
                  <h3 v-if="index == 2">{{ cards[1].name }}</h3>
                  <h3 v-if="index == 3">{{ cards[2].name }}</h3>
                  <img
                    v-if="index == 1"
                    :src="require('@/assets/crystal-pass.jpg')"
                    alt=""
                    width="170"
                    height="96"
                  />
                  <img
                    v-if="index == 2"
                    :src="require('@/assets/gold-annual-pass.jpg')"
                    alt=""
                    width="170"
                    height="96"
                  />
                  <img
                    v-if="index == 3"
                    :src="require('@/assets/diamond-annual-pass.jpg')"
                    alt=""
                    width="170"
                    height="96"
                  />
                </div>
                <div class="card-price">
                  <i>价格：</i>
                  <div>
                    <div>
                      <p>儿童 / 老年人</p>
                      <h5 v-if="index == 1">
                        {{ cards[0].other }}<sub>元</sub>
                      </h5>
                      <h5 v-if="index == 2">
                        {{ cards[1].other }}<sub>元</sub>
                      </h5>
                      <h5 v-if="index == 3">
                        {{ cards[2].other }}<sub>元</sub>
                      </h5>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </el-radio>
        </div>
        <div slot="footer" class="dialog-footer">
          <el-button @click="cardCancel">取 消</el-button>
          <el-button type="primary" @click="cardSelectToggle = false"
            >确 定</el-button
          >
        </div>
      </div>
      <div v-else>
        <div class="payment-box">
          <div style="flex: 1">
            <div class="title">
              <h2>多罗碧加乐园年卡</h2>
            </div>
            <div class="ticket-info" style="margin-top: 15px">
              <div style="display: flex">
                <img
                  v-if="index == 1"
                  :src="require('@/assets/crystal-pass.jpg')"
                  alt=""
                  width="170"
                  height="96"
                />
                <img
                  v-if="index == 2"
                  :src="require('@/assets/gold-annual-pass.jpg')"
                  alt=""
                  width="170"
                  height="96"
                />
                <img
                  v-if="index == 3"
                  :src="require('@/assets/diamond-annual-pass.jpg')"
                  alt=""
                  width="170"
                  height="96"
                />
                <div style="margin-left: 20px">
                  <strong style="font-size: 18px">{{ cardInfo.name }}</strong>
                  <p style="margin-top: 5px">{{ Date.now() | dateFilter }}</p>
                  <p v-if="cardInfo.type == 1" style="margin-top: 20px">
                    标准卡，数量：1
                    <span>&nbsp;(单价：{{ cardInfo.price }} 元/卡)</span>
                  </p>
                  <p v-if="cardInfo.type == 2" style="margin-top: 5px">
                    儿童卡 / 老年卡，数量：1
                    <span>&nbsp;(单价：{{ cardInfo.price }} 元/卡)</span>
                  </p>
                </div>
              </div>
            </div>
          </div>
          <div class="all-tickets" v-if="!cardSelectToggle">
            <strong style="font-size: 18px; color: #253b56">价格明细</strong>
            <div>
              <div class="total-price middle">
                <strong>合计金额</strong>
                <strong v-if="cardInfo.type == 1">
                  ￥{{ cardInfo.price }}
                  <span style="color: #85979c; font-size: 12px">元</span>
                </strong>
                <strong v-if="cardInfo.type == 2">
                  ￥{{ cardInfo.price }}
                  <span style="color: #85979c; font-size: 12px">元</span>
                </strong>
              </div>
              <div class="total-price" style="position: relative; top: -10px">
                <strong>当日应支付金额</strong>
                <strong v-if="cardInfo.type == 1">
                  ￥{{ cardInfo.price }}
                  <span style="color: #85979c; font-size: 12px">元</span>
                </strong>
                <strong v-if="cardInfo.type == 2">
                  ￥{{ cardInfo.price }}
                  <span style="color: #85979c; font-size: 12px">元</span>
                </strong>
              </div>
            </div>
          </div>
        </div>
        <el-divider></el-divider>
        <div class="payment-image" style="margin: 10px 0 30px">
          <div class="title">
            <h2>扫码支付</h2>
          </div>
          <div style="margin-top: 30px; text-align: center">
            <img
              :src="require('@/assets/Alipay.jpg')"
              alt=""
              width="350"
              height="393"
            />
            <img
              :src="require('@/assets/WeChat.jpg')"
              alt=""
              width="350"
              height="393"
            />
          </div>
        </div>
        <div slot="footer" class="dialog-footer">
          <el-button @click="cardCancel">取 消</el-button>
          <el-button type="primary" @click="cardPayment">确 定</el-button>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import moment from "moment";
import axios from "axios";
import { mapState, mapMutations } from "vuex";

export default {
  components: {},
  filters: {
    dateFilter(date) {
      return moment(date).format("YYYY年MM月DD日");
    },
  },
  data() {
    return {
      activeName: "1",
      radio1: "1",
      value1: "1",
      options1: ["0", "1", "2", "3", "4", "5"],
      value2: "0",
      options2: ["0", "1", "2", "3", "4", "5"],
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() < Date.now();
        },
      },
      value3: "",
      tickets: [
        {
          name: "乐园一日票 + 乐园美食套券",
          standard: 300, // 标准票
          other: 256, // 儿童/老年票
        },
        {
          name: "乐园夜场乐游乐食",
          standard: 200,
          other: 148,
        },
        {
          name: "一日票",
          standard: 200,
          other: 140,
        },
        {
          name: "夜场票",
          standard: 100,
          other: 50,
        },
      ],
      ticketDialogVisible: false, // 门票弹框
      cardDialogVisible: false, // 年卡弹框
      cardRadio: "1", // 年卡类型，1: 标准卡  2: 儿童/老年卡
      cardSelectToggle: true,
      cardInfo: null, // 年卡详情
      index: "1", // 年卡下标
      cards: [
        {
          name: "梦幻水晶卡",
          standard: 1399, // 标准
          other: 1049, // 儿童/老年
        },
        {
          name: "奇妙金卡",
          standard: 1899, // 标准
          other: 1424, // 儿童/老年
        },
        {
          name: "无限钻石卡",
          standard: 3599, // 标准
          other: 2699, // 儿童/老年
        },
      ],
    };
  },
  watch: {
    loginDialogFormVisible() {
      if (this.registerDialogFormVisible) {
        return;
      }
      if (!this.loginDialogFormVisible) {
        if (
          !window.sessionStorage.getItem("username") &&
          location.href.split("/")[location.href.split("/").length - 1] ==
            "onlineBooking"
        ) {
          this.$router.push("/");
        }
      }
    },
    registerDialogFormVisible() {
      if (!this.registerDialogFormVisible) {
        if (
          !window.sessionStorage.getItem("username") &&
          location.href.split("/")[location.href.split("/").length - 1] ==
            "onlineBooking"
        ) {
          this.$router.push("/");
        }
      }
    },
    cardRadio() {
      this.cardInfo = this.cardType(this.index);
    },
  },
  computed: {
    ...mapState(["loginDialogFormVisible", "registerDialogFormVisible"]),
  },
  created() {
    if (!window.sessionStorage.getItem("username")) {
      this.$message.error("请先登陆账号");
      this.showLoginDialog();
    }
  },
  mounted() {
    this.getTicketPrice();
    this.getCardPrice();
  },
  methods: {
    ...mapMutations(["showLoginDialog"]),
    // 获取门票价格
    async getTicketPrice() {
      var { data: res } = await axios.post(
        `${this.$server}/manageSystemTicketInfo`
      );
      console.log(res);
      if (res.code == 200) {
        res.data.forEach((item) => {
          if (item.ticketNameType == 1 && item.ticketType == 1) {
            this.tickets[0].standard = item.ticketPrice;
          } else if (item.ticketNameType == 1 && item.ticketType == 2) {
            this.tickets[0].other = item.ticketPrice;
          } else if (item.ticketNameType == 2 && item.ticketType == 1) {
            this.tickets[1].standard = item.ticketPrice;
          } else if (item.ticketNameType == 2 && item.ticketType == 2) {
            this.tickets[1].other = item.ticketPrice;
          } else if (item.ticketNameType == 3 && item.ticketType == 1) {
            this.tickets[2].standard = item.ticketPrice;
          } else if (item.ticketNameType == 3 && item.ticketType == 2) {
            this.tickets[2].other = item.ticketPrice;
          } else if (item.ticketNameType == 4 && item.ticketType == 1) {
            this.tickets[3].standard = item.ticketPrice;
          } else if (item.ticketNameType == 4 && item.ticketType == 2) {
            this.tickets[3].other = item.ticketPrice;
          }
        });
      }
    },
    // 门票付款按钮
    handlePayment() {
      this.ticketDialogVisible = true;
    },
    async ticketPayment() {
      this.ticketDialogVisible = false;
      var { data: res } = await axios.post(`${this.$server}/ticketOrders`, {
        username: window.sessionStorage.getItem("username"),
        phone: window.sessionStorage.getItem("telephone"),
        ticketName: this.tickets[this.radio1 - 1].name,
        normalTicketNum: this.value1,
        normalTicketPrice: this.tickets[this.radio1 - 1].standard,
        specialTicketNum: this.value2,
        specialTicketPrice: this.tickets[this.radio1 - 1].other,
        ticketDate: this.value3,
        totalPrice:
          this.tickets[this.radio1 - 1].standard * this.value1 +
          this.tickets[this.radio1 - 1].other * this.value2,
        createTime: Date.now(),
      });
      console.log(res, "门票订单响应信息");
      if (res.code == 200) {
        this.radio1 = "1";
        this.value1 = "1";
        this.value2 = "0";
        this.value3 = "";
        this.$message.success(res.msg);
        this.$router.push({ name: "myOrder" });
      }
    },
    // 获取年卡价格
    async getCardPrice() {
      var { data: res } = await axios.post(
        `${this.$server}/manageSystemCardInfo`
      );
      console.log(res);
      if (res.code == 200) {
        res.data.forEach((item) => {
          if (item.cardKind == 1 && item.cardType == 1) {
            this.cards[0].standard = item.cardPrice;
          } else if (item.cardKind == 1 && item.cardType == 2) {
            this.cards[0].other = item.cardPrice;
          } else if (item.cardKind == 2 && item.cardType == 1) {
            this.cards[1].standard = item.cardPrice;
          } else if (item.cardKind == 2 && item.cardType == 2) {
            this.cards[1].other = item.cardPrice;
          } else if (item.cardKind == 3 && item.cardType == 1) {
            this.cards[2].standard = item.cardPrice;
          } else if (item.cardKind == 3 && item.cardType == 2) {
            this.cards[2].other = item.cardPrice;
          }
        });
      }
    },
    // 年卡取消按钮
    cardCancel() {
      this.cardRadio = "1";
      this.cardDialogVisible = false;
      this.cardSelectToggle = true;
    },
    // 年卡付款按钮
    handleAnnualCard(index) {
      this.cardDialogVisible = true;
      console.log(index, "年卡下标");
      this.index = index;
      this.cardInfo = this.cardType(index);
    },
    async cardPayment() {
      this.cardDialogVisible = false;
      var { data: res } = await axios.post(`${this.$server}/cardOrders`, {
        username: window.sessionStorage.getItem("username"),
        phone: window.sessionStorage.getItem("telephone"),
        cardName: this.cardInfo.name,
        cardKind: this.index, // 1: 水晶梦幻卡  2: 奇妙金卡  3: 无限钻石卡
        cardType: this.cardInfo.type, // 1: 标准卡  2: 儿童/老年卡
        cardNum: 1,
        cardPrice: this.cardInfo.price,
        cardStartDate: Date.now(),
        cardEndDate: new Date(
          this.getAfterNYear(moment(Date.now()).format("YYYYMMDD"), 1)
        ).getTime(),
        createTime: Date.now(),
      });
      console.log(res, "年卡订单响应信息");
      if (res.code == 200) {
        this.cardInfo = null;
        this.cardRadio = "1";
        this.cardSelectToggle = true;
        this.$message.success(res.msg);
        this.$router.push({ name: "myOrder" });
      }
    },
    // 年卡类型
    cardType(index) {
      if (index == 1) {
        if (this.cardRadio == 1) {
          return { name: "梦幻水晶卡", type: 1, price: this.cards[0].standard };
        } else {
          return { name: "梦幻水晶卡", type: 2, price: this.cards[0].other };
        }
      }
      if (index == 2) {
        if (this.cardRadio == 1) {
          return { name: "奇妙金卡", type: 1, price: this.cards[1].standard };
        } else {
          return { name: "奇妙金卡", type: 2, price: this.cards[0].other };
        }
      }
      if (index == 3) {
        if (this.cardRadio == 1) {
          return { name: "无限钻石卡", type: 1, price: this.cards[2].standard };
        } else {
          return { name: "无限钻石卡", type: 2, price: this.cards[0].other };
        }
      }
    },
    /**
     * 计算N年后,YYYYMMDD
     * startdate：为开始时间，格式YYYYMMDD
     * nextYear：为间隔年月，如1表示一年后，2表示两年后
     */
    getAfterNYear(startdate, nextYear) {
      var expriedYear = parseInt(startdate.substring(0, 4)) + nextYear;
      var expriedMonth = startdate.substring(4, 6);
      var expriedDay = startdate.substring(6);
      //考虑二月份场景，若N年后的二月份日期大于该年的二月份的最后一天，则取该年二月份最后一天
      if (expriedMonth == "02" || expriedMonth == 2) {
        var monthEndDate = new Date(expriedYear, expriedMonth, 0).getDate();
        if (parseInt(expriedDay) > monthEndDate) {
          //为月底时间
          //取两年后的二月份最后一天
          expriedDay = monthEndDate;
        }
      }
      return expriedYear + "-" + expriedMonth + "-" + expriedDay;
    },
  },
};
</script>

<style scoped lang="scss">
::v-deep .el-radio {
  width: 300px;
  height: 100px;
  display: flex;

  strong {
    font-size: 18px;
  }

  p {
    line-height: 20px;
    margin-top: 10px;
    white-space: normal;
    width: inherit;
  }
}

.title {
  h2 {
    color: #253b56;
  }

  p {
    color: #253b56;
    margin-top: 10px;
  }
}

.choose-ticket {
  display: flex;
  margin-bottom: 50px;

  h3 {
    color: #a1afc0;
    font-size: 60px;
    font-weight: normal;
  }

  > div {
    margin-top: 12px;
    margin-left: 30px;

    strong {
      color: #253b56;
      font-size: 18px;
    }
  }

  .select-box {
    display: flex;
    margin-top: 30px;

    > div {
      display: flex;
      margin-right: 100px;

      ::v-deep .el-input__inner {
        width: 100px;
      }

      p {
        color: #253b56;
        font-size: 16px;
        margin-left: 20px;

        i {
          color: #2595d4;
          margin-left: 5px;
        }
      }
    }
  }

  .date-select-box {
    margin-top: 30px;

    ::v-deep .el-input__inner {
      width: 220px;
    }
  }
}

.third {
  h4 {
    font-size: 14px;
    margin-top: 10px;
    margin-bottom: 20px;
  }

  > div > div > div {
    width: 400px;
    border: 1px solid #dcdfe6;
    padding: 10px 20px;
  }

  .row {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-top: 5px;

    p {
      font-size: 14px;

      span {
        margin-left: 20px;
      }
    }
  }
}

.all-tickets {
  width: 350px;
  padding: 20px 30px;
  background-color: #ebf6fc;
  position: relative;
  top: -24px;

  .ticket-info {
    margin: 20px 0;
    padding: 20px 0;
    border-top: 1px solid #a1afc0;
    border-bottom: 1px solid #a1afc0;

    strong {
      font-weight: 600;
      color: #253b56;
    }

    p:first-of-type {
      margin-bottom: 10px;
    }

    p {
      font-size: 14px;
      color: #253b56;

      span {
        color: #768aa0;
      }
    }
  }

  .total-price {
    display: flex;
    color: #253b56;
    justify-content: space-between;
    margin-bottom: 30px;
  }
}

::v-deep .el-collapse {
  width: 1145px;
}

::v-deep .el-collapse-item__header {
  height: 200px;
  width: 1045px;
  padding: 30px 50px;
}

.card {
  display: flex;

  .img-name {
    margin-right: 100px;

    h3 {
      color: #253b56;
      font-weight: normal;
      font-size: 22px;
    }
  }

  .card-price {
    i {
      color: #253b56;
      font-size: 18px;
      font-style: normal;
    }

    > div {
      display: flex;

      > div {
        width: 150px;

        p {
          color: #253b56;
          font-size: 16px;
        }

        h5 {
          color: #253b56;
          font-size: 32px;
          font-weight: normal;
          margin-top: -10px;

          sub {
            font-size: 12px;
            position: relative;
            bottom: 8px;
            left: 5px;
          }
        }
      }
    }
  }
}

.item-content {
  font-size: 14px;
  margin: 0 50px;
  padding: 10px 0;
  border-top: 1px dashed #ababab;
  h4 {
    color: #ef4850;
  }
}

::v-deep .el-dialog__header {
  padding-bottom: 20px;
  border-bottom: 1px solid #eeeeee;
}

::v-deep .el-dialog__body {
  padding-top: 24px;
}

.payment-box {
  display: flex;

  .middle {
    margin-top: 20px;
    padding: 20px 0;
    border-top: 1px solid #a1afc0;
    border-bottom: 1px solid #a1afc0;
  }
}

.payment-image {
  img:last-of-type {
    margin-left: 50px;
  }
}

::v-deep .dialog-footer {
  text-align: center;
}

.card-box {
  display: flex;
  margin-top: 20px;
  margin-bottom: 30px;

  ::v-deep .el-radio {
    width: 400px;
    height: 180px;
  }

  .img-name {
    margin-right: 30px;

    img {
      margin-top: 20px;
    }
  }

  .card-price h5 {
    margin-top: 15px !important;
  }
}
</style>
